<!-- 活动规则通用弹窗 -->
<template>
  <!-- 提示弹窗 -->
  <uni-popup ref="popup">
    <div class="content">
      <!-- <image
        class="title"
        :src="titleImg"
        mode="aspectFit"
      /> -->
      <div class="title">
        <!-- {{title}} -->
        2024第四届嗨喵十月巅峰赛活动规则
      </div>
      <div class="rule-box">
        <!-- <rich-text
          class="rule-content"
          :nodes="rule"
          :selectable="false"
        /> -->
        <div class="desc">
          参与本次【嗨喵十月巅峰赛】活动（以下简称“本活动”）前，请用户详细阅读活动规则及相关条款。凡参与本次活动，则视为用户已阅读、理解并同意活动规则及注意事项全部内容。
          本活动包含“个人巅峰赛”和“团队邀请赛”两个板块，其中“个人巅峰赛”活动时间：2024年9月27日 18:00:00-2024年10月7日 24:00:00；“团队邀请赛”活动时间：2024年9月27日 18:00:00-2024年10月31日 24:00:00，本活动所有时间均以北京时间为准。
        </div>
        <div class="sub-title">活动参与规则</div>
        <div class="para">
          1. 活动期间，用户可以通过完成特定的活动任务，参与“个人巅峰赛”和“团队邀请赛”两个板块的相应活动赢取相应的活动奖励，两个比赛可同时参加，互不干扰。
        </div>
        <div class="para">
          2. 单个用户以个人身份即可参加“个人巅峰赛”，按照参与者所获得任务积分决定名次排行，活动结束时不同名次的参与者可获得不同的活动奖励，系统每日凌晨12点更新排名，任务与积分规则以具体活动页面展示为准，活动规则里不再做详细阐述。注：活动有效金额定义为：红包雨、转一转、幸运小转盘、争分夺秒、猜红包、扭一扭、开宝箱、红包墙等红包类游戏中发送给参与来宾的金额总和，且如活动中有红包雨游戏，则参与并得到红包雨游戏红包奖励的现场来宾人数不得少于15人。如用户充值到红包口袋后，不通过红包类游戏发放，直接通过系统后台提现，则该部分提现金额将不计入红包口袋有效流水金额中，也不换算成有效参赛积分，请知悉。
        </div>
        <div class="para">
          3. 用户参与“团队邀请赛”，需自己创建或者加入一个团队，团队成员完成相应的活动任务，均获得相应的团队积分，最终以团队积分的高低来进行相应的团队排名，直至活动结束确定最终团队排名，不同名次的团队可获得相应的团队奖励，奖励发放至团长，由团长根据各团队具体情况，进行相应的协商分配。团队任务与积分规则以具体活动页面展示为准，活动规则里不再做详细阐述。
        </div>
        <div class="para">
          4. “个人巅峰赛”按照参赛者最终积分排行前66名的参赛者将获得iPhone16Pro等奖品，“团队邀请赛”按照参赛团队最终积分排行前10名的团队将获得万元现金红包等奖品，具体奖品见活动页面，以活动页面实际展示为准。
        </div>
        <div class="para">
          5. 活动期间，每个用户只能被成功邀请一次参与活动。同一个登录账号、同一个手机号、同一个设备或同一提现账户等与用户身份相关的信息，其中任意一项或数项存在相同、相似、通过特定标记形成批量信息，或其他非真实有效等情形的，都视为同一个用户，按活动规则中的同一用户处理。
        </div>
        <div class="para">
          6. 新用户指嗨喵平台的新用户，即同一用户在参与本活动前，未曾注册登录过嗨喵账户的用户。
        </div>
        <div class="para">
          7. 如您邀请新用户参与本次活动，则邀请积分奖励将在新用户使用嗨喵大屏互动完成一场有效活动之后发放到您的活动账户。
        </div>
        <div class="para">
          8. 关于活动奖品，实物类奖品，我们将在活动结束后，统一安排邮寄发放；非实物现金类奖品，我们将统一发放至嗨喵账户，由获奖人员自行提现。
        </div>
        <div class="sub-title">注意事项：</div>
        <div class="para">
          1. 用户不得以任何不正当手段或舞弊方式参与本活动。一经发现，本平台有权采取限制登录、封禁账号、撤销活动资格、限制提现、账号金额清零、限制再次注册使用等措施，亦有权收回用户已领取的现金红包、追讨已提现的金额，并保留追究该用户责任的权利。如因此给用户造成损失，本平台不进行任何赔偿或补偿。不正当手段及舞弊行为包括但不限于：下载非官方客户端；使用模拟器、插件、外挂等非法工具扫码、下载、安装、注册、登录、赠与、领取现金红包、提现；注册多个账号；篡改设备数据；恶意牟利等扰乱平台秩序；使用插件、外挂、系统或第三方工具对本平台及本活动进行干扰、破坏、修改或施加其他影响及本平台认为的其他不正当手段。
        </div>
        <div class="para">
          2. 本平台依法运营此次活动，如因不可抗力、情势变更、相关政策变动、政府机关指令要求等原因导致本次活动调整、暂停举办或无法进行的，本平台有权随时决定修改、暂停、取消或终止本活动，并无需为此承担任何法律责任。
        </div>
        <div class="para">
          3. 如因第三方通过各种不当手段攻击、篡改，对本平台及本次活动进行干扰、破坏、修改或施加其他影响或系统故障，致使领取现金红包发放、提现等发生错误、用户无法参与或参与失败的，本平台无需为此承担任何法律责任。
        </div>
        <div class="para">
          4. 活动期间，因用户操作不当或用户所在地区网络故障、支付平台网络故障、电信运营商故障、第三方其他平台限制等非本平台所能控制的原因导致的用户无法参与活动，或参与失败，本平台无需为此承担任何法律责任。
        </div>
        <div class="para">
          5. 请用户务必通过嗨喵官方指定活动小程序客户端参与本次活动。任何人或第三方以本平台的名义宣称或从事类似活动或恶意发放、转让现金红包、恶意通知用户中奖、领取红包、欺诈等造成用户损失的，本平台无需为此承担任何法律责任。
        </div>
        <div class="para">
          6. 任何人不应利用本次活动进行博彩、洗钱或其他违法行为。对于本平台用户，一经发现，本平台有权取消此用户参与本次活动的资格、收回所获现金红包或相关奖品。如其行为构成犯罪，本平台有权移交相应司法机关处理。如因其行为给本平台造成损失，同时应当承担赔偿责任。
        </div>
        <div class="para">7. 本活动与Apple lnc.无关。</div>
        <div class="sub-title">奖励说明：</div>
        <div class="para">
          1. 您可以通过完成活动中的任务来参与个人、团队评比，以此获得平台提供的现金红包、实物奖励。
        </div>
        <div class="para">
          2. 本活动中领取的现金红包将自动发放到您的嗨喵APP个人账户，您可通过登录嗨喵APP“我的－我的余额－提现”按钮进行提现操作。
        </div>
        <div class="para">
          3. 如果您在提现截止时间2024年11月30日24点前未进行提现，则本活动此前向您发放的奖励将过期，视为您自愿放弃您账户中的奖励，您的嗨喵APP个人账户中在本次活动中获得现金奖励部分可能会被清零。
        </div>
        <div class="para">
          4. 如果我们发现或有理由认为您存在造假舞弊等违规操作，我们有权阻止您使用（领取提现现金红包）以及取消您获得的各项实物奖励，具体可参考活动规则“注意事项”。
        </div>
        <div class="para"></div>
        <div class="table">
          <div class="table-item">
            <div class="module">个人巅峰赛</div>
            <div class="header">
              <div class="cell">活动奖品</div>
              <div class="cell">价值</div>
              <div class="cell">数量</div>
              <div class="cell">活动名次</div>
            </div>
            <div class="table-body">
              <div
                class="row"
                v-for="(item, index) in personAwards"
                :key="index"
              >
                <div class="cell">{{ item.award }}</div>
                <div class="cell">￥{{ item.price }}</div>
                <div class="cell">{{ item.num }}</div>
                <div class="cell">{{ item.rank }}</div>
              </div>
            </div>
          </div>
          <div class="table-item">
            <div class="module">团队邀请赛</div>
            <div class="header">
              <div class="cell">活动奖品</div>
              <div class="cell">价值</div>
              <div class="cell">数量</div>
              <div class="cell">活动名次</div>
            </div>
            <div class="table-body">
              <div class="row" v-for="(item, index) in teamAwards" :key="index">
                <div class="cell">{{ item.award }}</div>
                <div class="cell">￥{{ item.price }}</div>
                <div class="cell">{{ item.num }}</div>
                <div class="cell">{{ item.rank }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="i-know" @click="close">我知道了</div>
    </div>
  </uni-popup>
</template>

<script setup lang="ts">
import type { ACTIVITY_RULE_KEY } from "@/static/constant/view-constant";

type Props = {
  /** 规则Key */
  ruleKey: (typeof ACTIVITY_RULE_KEY)[keyof typeof ACTIVITY_RULE_KEY];
  /** 活动规则标题 */
  title: string;
};

const props = withDefaults(defineProps<Props>(), { title: "" });

// const rule = ref("");

// onMounted(async () => {
//   if (!props.ruleKey) return;
//   const ruleRes = await reqGetActivityRule(props.ruleKey);
//   rule.value = addClassToHtml(ruleRes.data.data.ruleValue);
// });

const personAwards = ref([
  {
    award: "iPhone 16 Pro 256GB",
    price: "8999",
    num: "1",
    rank: "1",
  },
  {
    award: "大疆灵眸Osmo Pocket 3口袋云台相机",
    price: "3599",
    num: "1",
    rank: "2",
  },
  {
    award: "华苹果Watch Series 10智能手表46mm GPS版",
    price: "3183",
    num: "1",
    rank: "3",
  },
  {
    award: "主持人定制西装",
    price: "2999",
    num: "3",
    rank: "4-6",
  },
  {
    award: "礼东定制白酒",
    price: "1888",
    num: "5",
    rank: "7-11",
  },
  {
    award: "司仪宝",
    price: "399",
    num: "6",
    rank: "12-17",
  },
  {
    award: "黑神话悟空 • 数字豪华版",
    price: "328",
    num: "6",
    rank: "18-23",
  },
  {
    award: "嗨喵定制行李箱",
    price: "259",
    num: "10",
    rank: "24-33",
  },
  {
    award: "嗨喵定制礼包（充电宝+婚礼沙盘）",
    price: "168",
    num: "33",
    rank: "34-66",
  },
]);

const teamAwards = ref([
  {
    award: "12000元红包",
    price: "12000",
    num: "1",
    rank: "1",
  },
  {
    award: "8000元红包",
    price: "8000",
    num: "1",
    rank: "2",
  },
  {
    award: "6000元红包",
    price: "6000",
    num: "1",
    rank: "3",
  },
  {
    award: "4000元红包",
    price: "4000",
    num: "1",
    rank: "4",
  },
  {
    award: "3000元红包",
    price: "3000",
    num: "1",
    rank: "5",
  },
  {
    award: "2000元红包",
    price: "2000",
    num: "5",
    rank: "6-10",
  },
]);

/** 当前组件实例 */
const currentInstance = getCurrentInstance();

/** 弹窗打开 */
const open = () => {
  const popup = currentInstance?.refs.popup as UniHelper.UniPopupInstance;
  if (popup.open) {
    popup.open();
  }
};

/** 弹窗关闭 */
const close = () => {
  const popup = currentInstance?.refs.popup as UniHelper.UniPopupInstance;
  if (popup.close) {
    popup.close();
    emit("popupClose");
  }
};

defineExpose({
  open,
  close,
});

const emit = defineEmits<{
  (event: "popupClose"): void;
}>();
</script>

<style scoped lang="scss">
.content {
  width: min(92.2667vw, 370px);

  background-color: #fff;
  border-radius: 16px;

  padding: 22px 16px 24px;
  display: grid;
  grid-template:
    "title" max-content
    "rule-box" 300px
    "i-know" max-content
    / 1fr;
  row-gap: 15px;

  .title {
    margin-bottom: 10px;
    width: 100%;
    font-size: 24px;
    text-align: center;
  }

  .rule-box {
    grid-area: rule-box;

    width: 100%;
    max-height: 100%;
    overflow: scroll;
    .desc {
      margin-bottom: 20rpx;
    }
    .sub-title {
      font-weight: 600;
      line-height: 100rpx;
    }
    .para {
      margin-bottom: 10rpx;
    }
    .table {
      padding-top: 20rpx;
      .table-item {
        margin-bottom: 20rpx;
        font-size: 24rpx;
        color: #333;
        .module {
          font-weight: 600;
          line-height: 80rpx;
        }
        .header {
          background-color: #f9f9f9;
          border-top-left-radius: 8rpx;
          border-top-right-radius: 8rpx;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.4);
          display: flex;
          align-items: center;
          height: 71rpx;
          padding-left: 10rpx;
          .cell {
            flex: 1;
            &:nth-child(1) {
              flex: 3;
            }
            &:nth-child(4) {
              flex: 1.2;
            }
          }
        }
        .table-body {
          padding-left: 10rpx;
          .row {
            height: 54rpx;
            display: flex;
            align-items: center;
            background-color: #f9f9f9;
            font-size: 20rpx;
            .cell {
              flex: 1;
              &:nth-child(1) {
                flex: 3;
              }
              &:nth-child(4) {
                flex: 1.2;
              }
            }
            &:nth-child(odd) {
              background-color: #fff;
            }
          }
        }
      }
    }
  }

  .i-know {
    grid-area: i-know;
    justify-self: center;

    width: 240px;
    height: 36px;

    background: $button-bg;
    border-radius: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;
    color: #fff;
  }
}
</style>

<!-- 规则内容样式 -->
<style lang="scss">
.rich-h1 {
  font-size: 17px;
  font-weight: bold;
  color: #333;
}

.rich-p,
.rich-ol {
  margin-top: 5px;

  padding: 0 0 0 20px;

  font-size: 15px;
  line-height: 28px;
  color: #333;

  .rich-li {
    margin: 5px 0;
  }
}

.rich-table {
  margin: 5px auto;

  border-collapse: collapse;

  border: 1px solid #333;

  box-sizing: border-box;

  font-size: 11px;
  color: #333;

  .rich-tr {
    border: 1px solid #333;

    .rich-td {
      border: 1px solid #333;

      padding: 5px;
    }
  }
}
</style>
